import * as React from 'react'
import { Dimensions, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import Modal from 'react-native-modal'
import { AlertSheetViewOptions } from '.'
import { px2dp } from '../../../screen/px2dp'
import { px2sp } from '../../../screen/px2sp'





type State = {
    visible: boolean;
} & AlertSheetViewOptions





export default React.forwardRef<AlertSheetViewOptions.RefAttributes, {}>((_, ref) => {


    const defaultState: Partial<State> = {
        visible: false,
        actions: []
    }
    const [state, setState] = React.useState<Partial<State>>(defaultState)

    React.useImperativeHandle<unknown, AlertSheetViewOptions.RefAttributes>(ref, () => ({
        show: async (options: Partial<AlertSheetViewOptions>) => {
            setState(Object.assign({}, defaultState, { visible: true }, options))
        },
        hide
    }), [])


    const hide = async () => {
        setState(defaultState)
    }


    React.useEffect(() => {
        if (Platform.OS == 'android') {
            if (state.visible) {
                StatusBar.setBackgroundColor('black')
                StatusBar.setBarStyle('light-content')
            } else {
                StatusBar.setBackgroundColor('transparent')
                StatusBar.setBarStyle('dark-content')
            }
        }

    }, [state.visible])
    return (
        <Modal
            hideModalContentWhileAnimating={true}//通过隐藏模态内容直到动画完成来增强性能
            useNativeDriver={true}//定义动画是否应使用本机驱动程序
            animationIn='slideInUp'
            animationOut='slideOutDown'
            onBackButtonPress={() => {
                //按下Android后退按钮时调用
                hide()
            }}
            onBackdropPress={() => {
                //按下背景时调用
                hide()
            }}
            isVisible={state.visible}
            deviceHeight={Dimensions.get('screen').height}
            style={{ margin: 0}}
        >
            <View style={styles.container}>
                <View style={[styles.wrapper]}>
                    <View style={styles.itemContainer}>
                        {state.actions?.map((i, idx) =>
                            <TouchableOpacity
                                
                                key={`sg-action-${idx}`}
                                style={[styles.item]}
                                activeOpacity={1}
                                onPress={() => {
                                    hide()
                                    i.onClick && i.onClick()
                                }}>
                                <Text style={[styles.itemText,{color:i.color}]} numberOfLines={2}>{i.text}</Text>
                            </TouchableOpacity>
                        )}
                    </View>



                    <TouchableOpacity
                        style={[styles.cancel]}
                        activeOpacity={1}
                        onPress={() => {
                            hide()
                        }}>
                        <Text style={[styles.cancelText]}>取消</Text>
                    </TouchableOpacity>
                </View>

            </View>
        </Modal>
    )
})



export const alertSheetViewRef = React.createRef<AlertSheetViewOptions.RefAttributes>();



export const showAlertSheetModal = (props: Partial<AlertSheetViewOptions>) => {
    alertSheetViewRef.current?.show(props)
}






const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexGrow: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',

    },

    wrapper: {
        flexGrow: 0,
        flexShrink: 0,
        width: '100%',
        // backgroundColor: 'pink',
        overflow: 'hidden',
        borderTopLeftRadius: px2dp(10),
        borderTopRightRadius: px2dp(10),
        display: 'flex',
        padding: px2dp(15),
    },

    cancel: {
        height: px2dp(50),
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(10),
        backgroundColor: 'white',
        marginTop: px2dp(15),
    },
    cancelText: {
        fontSize: px2sp(15),
        color: '#2763FF',

    },

    itemContainer: {
        display: 'flex',
        borderRadius: px2dp(10),
        overflow: 'hidden',
        backgroundColor:'#f1f1f1'
    },
    item: {
        height: px2dp(50),
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',

        backgroundColor: 'white',
        marginTop: px2dp(0.75)
    },
    itemText: {
        fontSize: px2sp(12),
        color: '#666666',

    },

})